<template>
  <div>
    <pageMain padding="0px " background="transparent" v-loading="pageLoading">

      <div class="urtr-tags">
        <div class="urtr-tags-item" :class="{ 'urtr-tags-item-select': UserType == 0 }" @click="clickUserType(0)">全部用户
        </div>
        <div class="urtr-tags-item" :class="{ 'urtr-tags-item-select': UserType == 1 }" @click="clickUserType(1)">正式用户
        </div>
        <div class="urtr-tags-item" :class="{ 'urtr-tags-item-select': UserType == 2 }" @click="clickUserType(2)">临时用户
        </div>
        <div class="urtr-tags-item" :class="{ 'urtr-tags-item-select': UserType == 3 }" @click="clickUserType(3)">注销中</div>
         <div class="urtr-tags-item" :class="{ 'urtr-tags-item-select': UserType == 4 }" @click="clickUserType(4)">已注销</div>
        <div class="urtr-tags-item" :class="{ 'urtr-tags-item-select': UserType == 5 }" @click="clickUserType(5)">黑名单</div>
      </div>

      <div class="table-screen-options">
        <div class="table-screen-options-left">
          <ul class="table-screen-ul">
            <li class="table-screen-ul-li">
              <div class="table-screen-ul-li-key">用户名</div>
              <div class="table-screen-ul-li-value">
                <el-input size="mini" v-model="pageData.where.username" placeholder="请输入搜索用户名"></el-input>
              </div>
            </li>
            <li class="table-screen-ul-li">
              <div class="table-screen-ul-li-key">昵称</div>
              <div class="table-screen-ul-li-value">
                <el-input size="mini" v-model="pageData.where.nickname" placeholder="请输入搜索昵称"></el-input>
              </div>
            </li>
            <li class="table-screen-ul-li">
              <div class="table-screen-ul-li-key">手机号</div>
              <div class="table-screen-ul-li-value">
                <el-input size="mini" v-model="pageData.where.mobile" placeholder="请输入手机号码"></el-input>
              </div>
            </li>
          </ul>

          <ul class="table-screen-ul">
            <li class="table-screen-ul-li">
              <div class="table-screen-ul-li-key">状态</div>
              <div class="table-screen-ul-li-value">
                <el-select size="mini" v-model="pageData.where.state" placeholder="用户状态">
                  <el-option v-for="state in $dictionary.get('USER_STATE')" :label="state.label" :value="state.value"
                    :key="state.value"></el-option>
                </el-select>
              </div>
            </li>
            <li class="table-screen-ul-li">
              <div class="table-screen-ul-li-key">角色</div>
              <div class="table-screen-ul-li-value">
                <el-select size="mini" v-model="pageData.where.role" placeholder="用户角色">
                  <el-option v-for="role in rolesList" :label="role.name" :value="role.id" :key="role.id"></el-option>
                </el-select>
              </div>
            </li>
            <li class="table-screen-ul-li">
              <div class="table-screen-ul-li-key">性别</div>
              <div class="table-screen-ul-li-value">
                <el-select size="mini" v-model="pageData.where.gender" placeholder="用户性别">
                  <el-option v-for="gender in $dictionary.get('USER_GENDER')" :label="gender.label"
                    :value="gender.value" :key="gender.value"></el-option>
                </el-select>
              </div>
            </li>
          </ul>
          <ul class="table-screen-ul">
            <li class="table-screen-ul-li">
              <div class="table-screen-ul-li-key">范围</div>
              <div class="table-screen-ul-li-value">
                <el-select size="mini" v-model="pageData.where.reliable" placeholder="用户范围">
                  <el-option v-for="state in $dictionary.get('USER_RELIABLE')" :label="state.label" :value="state.value"
                    :key="state.value"></el-option>
                </el-select>
              </div>
            </li>
          </ul>
        </div>
        <ul class="table-screen-options-right">
          <li class="table-screen-options-right-li" @click="clickSearch">
            <el-button size="mini" plain type="primary" icon="el-icon-search">搜索</el-button>
          </li>
          <li class="table-screen-options-right-li" @click="clickReset">
            <el-button size="mini" plain type="primary" icon="el-icon-refresh">重置</el-button>
          </li>
        </ul>
      </div>

      <el-empty v-if="!pageData.list.length"></el-empty>

      <template v-else>
        <div class="overall-table-surround">

          <div class="table-status-tags">

            <div class="table-status-tags-item">全部</div>
            <div class="table-status-tags-item" v-for="(state, index) in $dictionary.get('USER_STATE')" :key="index">{{
      state.label
    }}</div>
          </div>

          <div class="overall-table-surround-options">
            <div class="overall-table-surround-options-left">
              <el-button size="mini" plain type="warning" icon="el-icon-refresh">全选</el-button>
              <el-button size="mini" plain type="danger" icon="el-icon-refresh">批量删除</el-button>
              <el-button size="mini" plain type="danger" icon="el-icon-refresh">导入/导出</el-button>
            </div>
            <div class="overall-table-surround-options-right">
              <el-dropdown @command="clcickAdduserDropDown">
                <el-button size="mini" type="primary" icon="el-icon-plus">添加用户</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="1">正式用户</el-dropdown-item>
                  <el-dropdown-item :command="0">临时用户</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="overall-table-surround-table">
            <el-table :cell-style="tableRowStyle" :size="tableSize" :border="tableBorder" :data="pageData.list"
              style="width: 100%">
              <el-table-column type="selection" width="45" align="center">
              </el-table-column>

              <el-table-column prop="date" label="用户">
                <template slot-scope="scope">
                  <div class="user-column overall-flex">
                    <avatar :size="34" :src="scope.row.avatar"></avatar>
                    <span class="user-column-span">{{
      scope.row.username
    }}</span>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="昵称" width="180">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" :content="scope.row.nickname" placement="top-start">
                    <span class="username-span">{{ scope.row.nickname }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>

              <el-table-column prop="reliable" label="用户范围" width="70" align="center">
                <template slot-scope="scope">
                  <template v-if="scope.row.reliable">
                    <el-tag type="success" size="mini" effect="plain">正式</el-tag>
                  </template>

                  <template v-else>
                    <el-tag type="warning" size="mini" effect="plain">临时</el-tag>
                  </template>
                </template>
              </el-table-column>

              <el-table-column prop="gender" label="性别" align="center" width="60">
                <template slot-scope="scope">
                  <span>{{
      $dictionary.extend("USER_GENDER", scope.row.gender)
    }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="role" label="角色" align="center" width="70">
                <template slot-scope="scope">
                  <template v-if="scope.row.role">
                    <el-tag size="mini" effect="plain">{{
      rolesList.find((i) => i.id == scope.row.role).name
    }}</el-tag>
                  </template>
                  <template v-else> - </template>
                </template>
              </el-table-column>

              <el-table-column prop="state" label="状态" align="center" width="60">
                <template slot-scope="scope">
                  <span>{{
        $dictionary.extend("USER_STATE", scope.row.state)
      }}</span>
                </template></el-table-column>
              <el-table-column prop="address" fixed="right" label="操作" width="120" align="center">
                <template slot-scope="scope">
                  <div class="user-options overall-flex">
                    <el-link type="primary" :underline="false" icon="el-icon-edit-outline"
                      @click="clickLookUser(scope.row, scope.$index)"></el-link>
                    <el-link type="danger" :underline="false" icon="el-icon-delete"
                      @click="clickRemoveUser(scope.row, scope.$index)"></el-link>
                    <el-link type="info" :underline="false" icon="el-icon-more-outline"></el-link>
                  </div>
                </template></el-table-column>
            </el-table>
          </div>
        </div>

        <div class="overall-table-pagination">
          <div class="overall-table-pagination-left">
            <el-select v-model="pageData.limit" placeholder="请选择" size="mini">
              <el-option v-for="item in pageLimit" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="overall-table-pagination-right">
            <el-pagination background layout="prev, pager, next" :current-page.sync="pageData.page"
              :page-size.sync="pageData.limit" :total="pageData.total" @size-change="LimitChange"
              @current-change="PageChange">
            </el-pagination>
          </div>
        </div>
      </template>

      <el-dialog title="编辑用户信息" :visible.sync="editDialogShow" :modal-append-to-body="false">
        <div class="edit-user">
          <el-form ref="form" :model="editUserForm" label-width="80px" label-position="left">
            <el-form-item label="头像">
              <el-input v-model="editUserForm.username"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="editUserForm.username"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="editUserForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="editUserForm.gender" placeholder="请选择">
                <el-option v-for="gender in $dictionary.get('USER_GENDER')" :label="gender.label" :value="gender.value"
                  :key="gender.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="个性签名">
              <el-input type="textarea" v-model="editUserForm.desc"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-checkbox-group v-model="editUserForm.type">
                <el-checkbox v-for="(role, index) in rolesList" :label="role.name" :name="role.id"
                  :key="index"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="editUserForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </pageMain>
    <!-- 添加临时用户 -->
    <el-dialog title="添加临时用户" :visible.sync="addNotReliableDialogShow" :modal-append-to-body="false" width="90%">
      <!-- 临时用户名 -->
      <!-- 临时密码 -->
      <!-- 设定角色 -->
      <!-- 过期时间 -->

      <el-form ref="form" :model="addNotReliableForm" label-width="90%" label-position="left">
        <el-form-item label="临时用户名">
          <span>{{ addNotReliableForm.username }}</span>
        </el-form-item>
        <el-form-item label="临时密码">
          <span>{{ addNotReliableForm.password }}</span>
        </el-form-item>
        <el-form-item label="过期时间">
          <el-select v-model="addNotReliableForm.endTime" placeholder="请选择">
            <el-option v-for="endTime in NotReliableEndTimeSelect" :key="endTime.value" :label="endTime.label"
              :value="endTime.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select clearable v-model="addNotReliableForm.role" placeholder="选择用户角色">
            <el-option v-for="role in rolesList" :label="role.name" :value="role.id" :key="role.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input placeholder="请输入备注" v-model="addNotReliableForm.comment" clearable>
          </el-input>
        </el-form-item>
      </el-form>

      <template slot="footer">
        <el-button type="primary" @click="sumbitNotAddReliable">立即创建</el-button>
        <el-button @click="addNotReliableDialogShow = false">取消</el-button>
      </template>
    </el-dialog>
    <!-- 添加正式用户 -->
    <el-dialog title="提示" :modal-append-to-body="false" :visible.sync="addReliableDialogShow" width="30%">
      <el-form ref="form" :model="addNotReliableForm" label-width="140px" label-position="left">
        <el-form-item label="用户名">
          <span>{{ addReliableForm.username }}</span>
        </el-form-item>
        <el-form-item label="密码">
          <span>{{ addReliableForm.password }}</span>
        </el-form-item>
        <el-form-item label="角色">
          <el-select clearable v-model="addReliableForm.role" placeholder="选择用户角色">
            <el-option v-for="role in rolesList" :label="role.name" :value="role.id" :key="role.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input placeholder="请输入备注" v-model="addReliableForm.comment" clearable>
          </el-input>
        </el-form-item>
      </el-form>

      <template slot="footer">
        <el-button type="primary" @click="sumbitAddReliable">立即创建</el-button>
        <el-button @click="addReliableDialogShow = false">取消</el-button>
      </template>
    </el-dialog>

  </div>
</template>

<script>
// import pageDialog from "~/page-dialog/page-dialog.vue";
import pageMain from "~/page-main/page-main.vue";
import avatar from "~/avatar/avatar.vue";
import manageAPI from "@/api/manage";
import RoleApi from "@/api/role";
import tableAttrMixin from "@/mixins/table_attr";
import loadingMixin from "@/mixins/loading";
export default {
  mixins: [tableAttrMixin, loadingMixin],
  components: {
    pageMain,
    avatar,
  },
  methods: {

    LimitChange() {
      console.log("LimitChange");
    },
    PageChange() {
      console.log("PageChange");
      console.log(this.pageData);
      this.getUserList()
    },

    // 点击提交创建临时用户
    sumbitNotAddReliable() {
      let { username, password, role } = this.addNotReliableForm;
      let reliable_duration = this.addNotReliableForm.endTime;
      manageAPI
        .addUser({ reliable: 0, role, username, password, reliable_duration })
        .then((res) => {
          this.addNotReliableDialogShow = false;
          this.getUserList();
          let { msg } = res;
          this.$message({
            message: msg,
            type: "success",
          });
        })
        .catch((err) => {
          let { msg } = err;
          this.$message({
            message: msg,
            type: "warning",
          });
        });
    },

    // 点击提交创建用户
    sumbitAddReliable() {
      manageAPI
        .addUser()
        .then((res) => {
          let { msg } = res;

          this.$message({
            message: msg,
            type: "success",
          });
        })
        .catch((err) => {
          let { msg } = err;
          this.$message({
            message: msg,
            type: "warning",
          });
        });
    },

    // 随机生成临时用户密码
    // 随机生成临时用户用户名
    generateUserName() {
      let leng = 10;

      var orgStr =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      let username = "";
      for (var i = 0; i < leng; i++) {
        username += orgStr.charAt(Math.floor(Math.random() * orgStr.length));
      }
      username = "RBLE-" + username.toUpperCase();
      this.addNotReliableForm.username = username;
    },
    generatePassword() {
      this.addNotReliableForm.password = "随机Miami";
    },

    clcickAdduserDropDown(value) {
      if (value == 1) {
        this.clickAddReliableUser();
      } else if (value == 0) {
        this.clickAddNotReliableUser();
      }
    },

    // 点击添加正式用户
    clickAddReliableUser() {
      console.log("点击了添加正式用户");
      this.addReliableDialogShow = true;
    },
    // 点击添加临时用户
    clickAddNotReliableUser() {
      console.log("点击添加临时用户");
      this.addNotReliableDialogShow = true;
    },
    // 点击查看用户
    clickLookUser(item) {
      this.$router.push({
        name: "userManagementInfo",
        query: {
          userid: item.id,
        },
      });
    },
    // 获取角色列表
    async getRoleList() {
      RoleApi.list().then((res) => {
        let { data } = res;
        this.rolesList = [];
        this.rolesList = data;
      });
    },
    // 点击查询
    clickSearch() {
      this.pageData.page = 1;
      this.getUserList();
    },
    clickReset() {
      this.pageData.page = 1;
      for (let item of Object.keys(this.pageData.where)) {
        this.pageData.where[item] = null;
      }
      this.getUserList();
    },
    clickAddUser() {
      this.$router.push({
        name: "userManagementAdd",
      });
    },
    // 获取用户列表
    async getUserList() {
      this.pageLoading = true;

      let { page, limit, where } = this.pageData;
      manageAPI
        .userList({ page, limit, where })
        .then((res) => {
          let { data } = res;
          let { total, list } = data;
          this.pageData.list = [];
          this.pageData.list = list;
          this.pageData.total = total;
        })
        .catch((err) => {
          this.$message({
            message: err.msg,
            type: "error",
          });
        })
        .finally(() => {
          this.pageLoading = false;
        });
    },

    // 点击删除用户
    clickRemoveUser(item, index) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return manageAPI.remove({ id: item.id });
        })
        .then((res) => {
          console.log(res);
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.pageData.list.splice(index, 1);
        })
        .catch((err) => {
          if (typeof err != "string") {
            this.$message({
              message: err.msg,
              type: "error",
            });
          }
        });
    },
    // 点击用户列表类型
    clickUserType(index) {
      this.UserType = index
    }

  },
  created() {

    this.getUserList();
    this.getRoleList();
  },

  watch: {
    addNotReliableDialogShow(newVal) {
      if (newVal) {
        this.generateUserName();
      } else {
        this.addNotReliableForm.role = null;
        this.addNotReliableForm.comment = null;
        this.addNotReliableForm.endTime = null;
      }
    },
  },

  data() {
    return {

      // 拉黑用户弹窗
      ToBlackDialog:true,

      // 用户类型选项
      UserType: 0,
      // 用户状态选项
      UserListStatusSelect: 0,

      // 临时用户结束时间选项
      NotReliableEndTimeSelect: [
        { value: 1845151, label: "30分钟" },
        { value: 300, label: "一天" },
        { value: 60, label: "三天" },
      ],

      // 添加临时用户表单
      addNotReliableForm: {
        username: "",
        password: "123456",
        endTime: null,
        role: null,
      },
      // 添加正式用户表单
      addReliableForm: {},
      // 添加临时用户表单弹窗显示状态
      addNotReliableDialogShow: false,
      // 添加正式用户表单弹窗显示状态
      addReliableDialogShow: false,

      editDialogShow: false,
      // 编辑用户表单
      editUserForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        gender: 0, // 性别
        username: "", // 用户名
        nickname: "", // 昵称
      },
      // 角色列表
      rolesList: [],
      pageData: {
        page: 1,
        limit: 10,
        total: null,
        list: [],
        where: {
          mobile: "",
          username: "",
          nickname: "",
          gender: null,
          state: null,
          role: null,
          reliable: null,
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
$focusColor: rgb(54, 162, 234);

.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 14px;
}

.urtr-tags {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 20px;

  &-item {
    line-height: 35px;
    font-size: 1.1rem;
    border-bottom: .2rem solid transparent;
    transition: .3s border-color linear;

    &-select {
      color: $focusColor;
      border-color: $focusColor;
    }
  }
}

.table-status-tags {
  padding: 10px 0px;
  display: flex;
  align-items: center;
  gap: 10px;

  &-item {
    display: flex;
    padding: 5px 20px;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .05);
    color: rgba(51, 51, 51, .8);
    border-radius: 4px;

    &-select {
      border: .2rem solid $focusColor;
      color: $focusColor;
    }

    &:hover {
      color: $focusColor
    }
  }
}

.user-data-board {
  width: 60%;
  display: flex;
  height: 110px;
  background-color: rgb(18, 161, 218);
  border-radius: 15px;
  overflow: hidden;



  &-item {
    flex: 1;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

    &-top-span {
      font-weight: bold;
      font-size: 1.2rem;
      color: white;
    }

    &-bottom-span {
      color: gray;
      font-size: .8rem;
    }

    &:hover &-bottom-span {
      color: white;
    }
  }




}


.table-surround {
  background: white;
  padding: 14px 20px;
}

.table-pagination {
  padding: 0px 20px;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &-left {
    width: 190px;
  }

  &-right {
    width: 40%;
  }
}

.user-options {
  justify-content: space-around;
}

.where-list {
  gap: 35px;
  margin-bottom: 10px;
}

.username-span {
  white-space: nowrap;
  overflow: hidden;
}

.table-screen-options {
  padding: 18px 18px;
  padding-bottom: 30px;
  background: white;
  border-bottom: 1px dashed #c3c3c3;
  border-width: 2px;
  margin-bottom: 15px;
  display: flex;

  &-left {
    flex: 1;
  }

  &-right {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  &-right:empty {
    margin-left: 0px;
    width: 0px;
  }
}

.table-screen-ul {
  display: flex;
  gap: 15px;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.table-screen-ul:last-child {
  margin-bottom: 0px;
}

.table-screen-ul-li {
  $width: 32%;
  min-width: $width;
  max-width: $width;
  display: flex;
}

.table-screen-ul-li-key,
.table-screen-ul-li-value {
  height: 100%;
}

.table-screen-ul-li-key {
  width: 80px;
  display: flex;
  align-items: center;
  text-indent: 10px;
  font-size: 0.8rem;
}

.table-screen-ul-li-value {
  flex: 1;
  display: flex;
}

.user-column {
  min-width: 190px;
  gap: 12px;
  align-items: center;
}

.user-column-span {
  flex: 1;
  text-align: left;
}
</style>
